<template>  
    <div class="photo-container">  
      <h2 class="photo-title">我的照片</h2>  
      <div class="photo-gallery">  
        <div class="photo-item" v-for="(photo, index) in photos" :key="index">  
          <img :src="photo" alt="Photo" />  
        </div>  
      </div>  
      <button class="add-photo-btn" @click="addPhoto">添加照片</button>  
    </div>  
  </template>  
    
  <script>  
  export default {  
    data() {  
      return {  
        photos: [  
        'https://ai-painting-image.vivo.com.cn/ai-painting/763783fb0b1dcb20f49e510e9c58e53f3bc51a27-0.png ', // 替换为你的图片路径  
        'https://ai-painting-image.vivo.com.cn/ai-painting/763783fb0b1dcb20f49e510e9c58e53f3bc51a27-0.png ',  
          // ... 更多图片路径  
        ],  
      };  
    },  
    methods: {  
      addPhoto() {  
        // 这里添加添加照片的逻辑，比如打开文件选择对话框  
        // 由于这是一个前端示例，这里只是简单地模拟添加一张默认图片  
        this.photos.push('https://ai-painting-image.vivo.com.cn/ai-painting/763783fb0b1dcb20f49e510e9c58e53f3bc51a27-0.png ');
        
      },  
    },  
  };  
  </script>  
    
  <style scoped>  
  .photo-container {  
    font-family: SimSun, serif; /* 宋体 */  
    font-size: 14px;  
  }  
    
  .photo-title {  
    margin-bottom: 20px;  
    text-align: center;  
  }  
    
  .photo-gallery {  
    display: flex;  
    overflow-x: auto; /* 允许水平滚动 */  
    scroll-snap-type: x mandatory; /* CSS Scroll Snap Modules Level 1，可选 */  
    padding: 10px;  
  }  
    
  .photo-item {  
    flex: 0 0 auto;  
    margin-right: 10px; /* 图片之间的间距 */  
    scroll-snap-align: start; /* CSS Scroll Snap Modules Level 1，可选 */  
    border: 2px solid green; /* 绿色描边 */  
    border-radius: 10px; /* 圆角 */  
    overflow: hidden; /* 确保图片不被拉伸或变形 */  
  }  
    
  .photo-item img {  
    width: 100%; /* 图片宽度与容器相同 */  
    height: auto; /* 图片高度自动 */  
    display: block; /* 移除图片底部默认的间隙 */  
  }  
    
  .add-photo-btn {  
    display: block;  
    margin: 20px auto;  
    padding: 10px 20px;  
    font-family: SimSun, serif; /* 宋体 */  
    font-size: 14px;  
    background-color: #eee;  
    border: none;  
    border-radius: 5px;  
    cursor: pointer;  
  }  
  </style>